<!DOCTYPE html>
<html>
<head>
	<title>英雄界面</title>
</head>
<body>
	<style type="text/css">
		div{
			/*border:1px solid red;*/
			color: white;
		}
		span{
			/*border:1px solid red;*/
		}
		body{
			font-size: 14px
		}
		.grayBackground{
			width: 1024px;
			height: 720px;
			background-color: gray;
		}
		span{
			margin: 10px;
		}

		div.text{
			width: 340px;
			height: 620px;
			margin: 10px;
			background:black;
			float: left;
		}
		div.picture{
			background-color: black;
			width: 630px;
			height: 700px;
			float: right;
			margin: 10px;
			padding: 5px 0px 5px 8px;
		}
		.title{
			font-size: 20px;
			color: white;
			margin: 10px;
		}
		.name{
			font-size: 14px;
			color: white;
			margin: 5px;
			padding: 5px;
		}
		span.box1{
			margin: 10px 2px 10px 15px;
			padding: 5px 2px 5px 5px;
			font-size:10px;
		}
		span.box2{
			margin: 10px 10px 10px 20px;
			padding:5px;
			font-size:10px;
		}
		div.img{
			width: 66px;
			height: 90px;
			margin:5px;
			padding: 5px;
			float: left; 
			text-align: center;
		}
		img{
			border:1px solid gray;
		}
	</style>

	<div class="grayBackground">
		<div class="text">
			<p class="title" align="center">英雄资料</p>
			<div class="name">
				<span class="box2"><input type="checkbox"></span>坦克
				<span class="box2"><input type="checkbox"></span>法师
				<span class="box2"><input type="checkbox"></span>刺客
			</div>
			<div class="name">
				<span class="box2"><input type="checkbox"></span>辅助
				<span class="box2"><input type="checkbox"></span>新手
				<span class="box2"><input type="checkbox"></span>近战
			</div>
			<div class="name">
				<span class="box2"><input type="checkbox"></span>坦克
				<span class="box2"><input type="checkbox"></span>法师
				<span class="box2"><input type="checkbox"></span>刺客
			</div>
			<div class="name">
				<span class="box2"><input type="checkbox"></span>坦克
				<span class="box2"><input type="checkbox"></span>法师
				<span class="box2"><input type="checkbox"></span>刺客
			</div>
			<p class="title" align="center">英雄价格</p>
			<div class="name">
				<span class="box2"><input type="checkbox"></span>6300
				<span class="box2"><input type="checkbox"></span>4800
				<span class="box2"><input type="checkbox"></span>3150
			</div>
			<div class="name">
				<span class="box2"><input type="checkbox"></span>1350
				<span class="box2"><input type="checkbox"></span>450
			</div>
			<p class="title" align="center">物品资料</p>
			<div class="name">
				<span class="box1"><input type="checkbox"></span>生命值
				<span class="box1"><input type="checkbox"></span>攻击速度
				<span class="box1"><input type="checkbox"></span>护甲穿透
			</div>
			<div class="name">
				<span class="box1"><input type="checkbox"></span>生命值
				<span class="box1"><input type="checkbox"></span>攻击速度
				<span class="box1"><input type="checkbox"></span>护甲穿透
			</div>
			<div class="name">
				<span class="box1"><input type="checkbox"></span>生命值
				<span class="box1"><input type="checkbox"></span>攻击速度
				<span class="box1"><input type="checkbox"></span>护甲穿透
			</div>
			<div class="name">
				<span class="box1"><input type="checkbox"></span>生命值
				<span class="box1"><input type="checkbox"></span>攻击速度
				<span class="box1"><input type="checkbox"></span>护甲穿透
			</div>
			<div class="name">
				<span class="box1"><input type="checkbox"></span>生命值
				<span class="box1"><input type="checkbox"></span>攻击速度
				<span class="box1"><input type="checkbox"></span>护甲穿透
			</div>
			<div class="name">
				<span class="box1"><input type="checkbox"></span>法力回复
				<span class="box1"><input type="checkbox"></span>法术吸血
				<span class="box1"><input type="checkbox"></span>移动速度
			</div>
			<div class="name">
				<span class="box"><input type="checkbox"></span>生命值
			</div>
		</div>

		<div class="picture">
			<!--
				<span class="hero;left">
					<img src="0.jpg" width="50px" class="left"><br>
					<orange>狗头</orange>
				</span>
			-->
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>
			<div class="img">
			<img src="0.jpg" width="50px" class="left"><br>
			沙漠死神<br>内瑟斯
			</div>

		</div>
	</div>
</body>
</html>